/* 
 * File        : inline-block.css
 * Version     : 1.0
 * Author      : leif.olsen@knowit.no
 * Copyright   : 
 * Description : Cross-Browser Inline-Block
 *               Inspirations:
 *                 http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
 *                 http://blog.hedgerwow.com/2007/11/14/item-list-grid-real-world-practice-with-displayinline-block-across-browsers/
 * Notes       : 
 *
 * Limitations : 
 * Created     : 20090229
 * Tested in   : IE5.5                                  : Not tested (NT), don't think it will work!
 *               IE6 win Quirks mode                    : NA, this is XHTML!
 *               IE6 win Standards mode                 : NA, 
 *               Firefox 1.5 win                        : NT, 
 *               Firefox 2.x win                        : NT, 
 *               Firefox 2.x linux                      : NT, 
 *               Firefox 3.x linux                      : NT, 
 *               Opera 9.x   linux                      : NT, 
 *               Opera 9.x   win                        : OK, 
 *               Firefox 3.x win                        : OK, 
 *               IE7                                    : OK,
 *               Safari 3.1  win                        : OK,
 *               Chrome 1.x win                         : OK,
 * Dependencies: form.css
 * History     : 20090221 - Got rid of ie6
 */


.inline-block {
  width: auto;
  min-height: .1em;
  min-width: .1em;
  vertical-align: top;         /* results in a great looking grid: */
  display: -moz-inline-stack;  /* Firefox2 need this to simulate display:inline-block   */
  display: inline-block;       /* ie does not apply this to Block Element, and Firefox2 */
                               /* does not render this, too                             */
  zoom:1;                      /* fix ie7, trigger hasLayout */
  *display:inline;             /* fix ie6+ie7, once hasLayout is true, set display:inline to block  */
                               /* element will make display:inline behave like display:inline-block */
  _overflow:hidden;            /* fix ie6, to expanded content */
  _height: .1em;               /* fix ie6, treats height as min-height */
  
  /*margin-left: -3px;          /* fix w3c, if the inline-block element has float:none; then a */
                               /* 3px gap will appear between inline-block elements. */
  /* *margin-left: 0;             /* fix ie7, no 3px gap on ie7 */
}
